<template>
  <view class="user-info">
    <view class="container">
      <view class="blue-line">
        <text>头像</text>
      </view>
      <view class="red-line">
        <button
          class="avatar-btn"
          open-type="chooseAvatar"
          :style="{ border: avatarUrl.length ? 'none' : '1px solid #999' }"
          @chooseavatar="getAvatar"
        >
          <image class="avatar" :src="avatarUrl"></image>
        </button>
      </view>
    </view>
    <view class="container">
      <view class="blue-line">
        <text>昵称</text>
      </view>
      <view class="red-line">
        <u--input
          placeholder="请输入昵称"
          border="none"
          v-model="inputValue"
          inputAlign="right"
          type="nickname"
          @change="inputChange"
        ></u--input>
      </view>
    </view>
    <view class="hint">昵称限2-32个字符，一个汉字为2个字符</view>
    <u-button
      text="确认"
      shape="circle"
      :hairline="false"
      throttleTime="2000"
      color="linear-gradient(to right, #c11d26, #e74d57)"
      @click="handleConfirm"
    ></u-button>
  </view>
</template>

<script>
import userApi from "@/api/user";
import login from "@/api/login.js"
import { baseUrl } from "@/config";

export default {
  name: "userInfo",
  data() {
    return {
      avatarUrl: "",
      inputValue: "",
    };
  },
  async onLoad(options) {
	  if (options.avatar) {
	  	this.avatarUrl = options.avatar
	  }
	  
	  if (options.avatar) {
	  	this.inputValue = options.nickName
	  }
  },
  async onShow() {},
  onReady() {},
  methods: {
    getAvatar(e) {
	  console.log(e,"头像")
      uni.uploadFile({
		methods:'post',
        url: baseUrl + "/common/upload",
        filePath: e.detail.avatarUrl,
        name: "file",
		header: { // 添加请求头并携带 token
		            'Authorization': `Bearer ${uni.getStorageSync('token')}`,
		            'Content-Type': 'multipart/form-data' // 必须设置为 multipart/form-data
		 },
        success: (res) => {
          const data = JSON.parse(res.data);
          if (data.code == 200) {
            this.avatarUrl = baseUrl + data.fileName;
          }
		  console.log(data,"后端返回")
        },
		fail:(error)=>{
			 console.log(error,"错误信息")
		}
      });
	
    },
    inputChange(e) {
      // console.log("e-----", e);
    },
    handleConfirm() {
      if (this.avatarUrl == "") {
        uni.showToast({
          icon: "none",
          title: "请上传头像",
        });
        return;
      }
      if (this.inputValue == "") {
        uni.showToast({
          icon: "none",
          title: "请输入昵称",
        });
        return;
      }
      let data = {
        nickName: this.inputValue,
        avatar: this.avatarUrl,
      };
      login.setUserInfo(data).then((res) => {
        if (res.code == 200) {
          uni.showToast({
            icon: "none",
            title: "用户资料修改成功！",
          });
	   uni.$emit('avatorChange', {})
          setTimeout(() => {
            let pages = getCurrentPages();
            uni.navigateBack({ delta: pages.length - 2 });
          }, 1500);
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.user-info {
  width: 100vw;
  height: 100vh;
  background: #fff;
  padding: 20rpx 38rpx;
  box-sizing: border-box;

  .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 122rpx;
    border-bottom: 1px solid #ebebeb;

    .drop {
      width: 42rpx;
      height: 42rpx;
      margin-left: 14rpx;
    }

    button::after {
      border: none;
    }

    .avatar-btn {
      width: 68rpx;
      height: 68rpx;
      border: none;
      background: none;
      padding: 0;
      margin: 0;
      border-radius: 50%;
      box-sizing: border-box;

      .avatar {
        width: 68rpx;
        height: 68rpx;
        border-radius: 50%;
      }
    }

    .blue-line {
      color: #000000;
      font-family: "PingFang SC";
      font-size: 30rpx;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
      opacity: 0.9;
    }

    .red-line {
      display: flex;
      align-items: center;
    }
  }

  .hint {
    margin: 20rpx 0 100rpx;
    font-size: 24rpx;
    color: #999;
  }
}
</style>
